<template>
  <div class='container'>
      <el-dialog
      :title="title"
      :visible.sync="addDialogVisible"
      @close="onClose"
      width="50%">
        <el-form :model="addArticlesForm" :rules="articlesFormRules" ref="addArticlesForm" label-width="100px">
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="addArticlesForm.title" placeholder="请输入文章标签"/>
          </el-form-item>
           <el-form-item label="文章内容" prop="articleBody">
             <quill-editor ref="text" v-model="addArticlesForm.articleBody" class="myQuillEditor" :options="editorOption" />
          </el-form-item>
          <el-form-item label="视频地址" prop="videoURL" >
            <el-input v-model="addArticlesForm.videoURL" placeholder="请输入视频地址"/>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSave">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { add, update } from '@/api/hmmm/articles.js'
import 'highlight.js/styles/monokai-sublime.css' // 高亮样式
import hljs from 'highlight.js' // 高亮js
hljs.configure({
  languages: ['javascript', 'python']
})
export default {
  props: {
    addArticlesForm: {
      type: Object,
      required: true
    }
  },
  name: 'addArticles',
  data () {
    return {
      addDialogVisible: false,
      articlesFormRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
      },
      // 自定义配置富文本需要的功能
      editorOption: {
        placeholder: '',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote', 'code-block'], // 引用  代码块
            ['image', 'link'] // 链接、图片
          ],
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value // 代码高亮需要配置的地方
            }
          }
        }
      }
    }
  },
  computed: {
    title () {
      return this.addArticlesForm.id ? '编辑文章' : '新增文章'
    }
  },
  components: {
    quillEditor
  },
  methods: {
    // 关闭弹出层
    onClose () {
      this.$emit('on-close')
    },
    // 点击确定
    async onSave () {
      if (this.addArticlesForm.id) {
        // 修改
        await update(this.addArticlesForm)
      } else {
        // 添加
        await add(this.addArticlesForm)
      }
      this.addDialogVisible = false
      this.$emit('on-save')
      this.$message.success('操作成功')
    }
  }
}
</script>

<style scoped lang='less'>
.myQuillEditor{
  ::v-deep .ql-container{
   height: 200px;
 }
}
::v-deep .el-dialog__footer{
  text-align: right;
}

</style>
